<template>
  <div class="theme-toggle" :class="{ 'theme-toggle--dark': isDark }">
    <button
      class="theme-toggle__button"
      @click="toggleTheme"
      :title="`切换到 ${nextThemeLabel} (⌘⇧T)`"
      aria-label="切换主题"
    >
      <div class="theme-toggle__track">
        <div class="theme-toggle__thumb">
          <Transition name="theme-icon" mode="out-in">
            <!-- 太阳图标 -->
            <svg
              v-if="!isDark"
              key="sun"
              class="theme-icon theme-icon--sun"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="12" cy="12" r="5"></circle>
              <line x1="12" y1="1" x2="12" y2="3"></line>
              <line x1="12" y1="21" x2="12" y2="23"></line>
              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
              <line x1="1" y1="12" x2="3" y2="12"></line>
              <line x1="21" y1="12" x2="23" y2="12"></line>
              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
            </svg>
            <!-- 月亮图标 -->
            <svg
              v-else
              key="moon"
              class="theme-icon theme-icon--moon"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
            </svg>
          </Transition>
        </div>
      </div>
    </button>

    <!-- 主题模式标签 -->
    <div class="theme-toggle__label" :class="{ 'theme-toggle__label--visible': showLabel }">
      {{ nextThemeLabel }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue'
import { useTheme } from '@/composables/useTheme'

const { themeMode, isDark, nextTheme, toggleTheme } = useTheme()

const showLabel = ref(false)
let labelTimeout: NodeJS.Timeout | null = null

// 主题模式标签映射
const themeLabels = {
  light: '浅色模式',
  dark: '深色模式',
  auto: '跟随系统'
}

const nextThemeLabel = computed(() => themeLabels[nextTheme.value])

// 键盘快捷键支持
const handleKeydown = (event: KeyboardEvent) => {
  // Cmd/Ctrl + Shift + T
  if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'T') {
    event.preventDefault()
    toggleTheme()
  }
}

// 显示标签
const showLabelTemporarily = () => {
  if (labelTimeout) {
    clearTimeout(labelTimeout)
  }

  showLabel.value = true
  labelTimeout = setTimeout(() => {
    showLabel.value = false
  }, 2000)
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown)

  // 悬停时显示标签
  const button = document.querySelector('.theme-toggle__button')
  if (button) {
    button.addEventListener('mouseenter', showLabelTemporarily)
  }
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown)

  if (labelTimeout) {
    clearTimeout(labelTimeout)
  }
})
</script>

<style scoped>
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle__button {
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 22px;
  background: var(--uc-bg-secondary);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--uc-shadow-sm);
}

.theme-toggle__button:hover {
  transform: scale(1.05);
  box-shadow: var(--uc-shadow-md);
}

.theme-toggle__button:active {
  transform: scale(0.95);
}

.theme-toggle__track {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  height: 38px;
  background: var(--uc-bg-tertiary);
  border-radius: 19px;
  transition: background 0.3s ease;
}

.theme-toggle--dark .theme-toggle__track {
  background: rgba(255, 255, 255, 0.1);
}

.theme-toggle__thumb {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--uc-accent-primary), var(--uc-accent-secondary));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-toggle--dark .theme-toggle__thumb {
  transform: translateX(34px);
}

.theme-icon {
  width: 16px;
  height: 16px;
  transition: all 0.3s ease;
}

.theme-icon--sun {
  color: #FFD700;
}

.theme-icon--moon {
  color: #F0F0F0;
}

.theme-toggle__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--uc-text-secondary);
  background: var(--uc-bg-secondary);
  padding: 4px 8px;
  border-radius: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-8px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  box-shadow: var(--uc-shadow-sm);
}

.theme-toggle__label--visible {
  opacity: 1;
  transform: translateY(0);
}

/* 图标过渡动画 */
.theme-icon-enter-active,
.theme-icon-leave-active {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-icon-enter-from,
.theme-icon-leave-to {
  opacity: 0;
  transform: scale(0.8) rotate(180deg);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .theme-toggle__button {
    width: 36px;
    height: 36px;
  }

  .theme-toggle__track {
    top: 2px;
    left: 2px;
    right: 2px;
    height: 32px;
  }

  .theme-toggle__thumb {
    width: 24px;
    height: 24px;
    top: 4px;
    left: 4px;
  }

  .theme-toggle--dark .theme-toggle__thumb {
    transform: translateX(28px);
  }

  .theme-icon {
    width: 14px;
    height: 14px;
  }
}

/* 无障碍优化 */
.theme-toggle__button:focus-visible {
  outline: 2px solid var(--uc-accent-primary);
  outline-offset: 2px;
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .theme-toggle__button {
    border: 2px solid var(--uc-border-primary);
  }

  .theme-toggle__thumb {
    border: 2px solid currentColor;
  }
}
</style>